<template>
  <div class="common-layout">
    <div style="width: 1600px;margin: 0 auto;background-color: white">
      <el-container>

        <el-main>
          <!--    上面部分产品详情      -->
          <div style="height: 800px;width: 50%;margin-left: 100px" v-for="r in s">
            <!--     左上大图       -->
            <span >
            <img :src="r.img_url" style="width: 70%;height: 70%;">
            </span><br>
            <span>温馨提示：以上图片仅供参考，若图片与实物有所不同，则以实物为准</span><br>
            <!--       左下详细小图     -->
            <div style="margin-left: -60px">
              <span style="margin-left: 20px;">
                <img :src="s1.img_url1" style="width: 23%;height: 20%;margin-top: 20px" v-for="s1 in s">
              </span> <span style="margin-left: 20px;">
                <img :src="s1.img_url2" style="width: 23%;height: 20%;margin-top: 20px" v-for="s1 in s">
              </span> <span style="margin-left: 20px;">
                <img :src="s1.img_url3" style="width: 23%;height: 20%;margin-top: 20px" v-for="s1 in s">
              </span>

            </div>
          </div>

          <!--                右上-->
          <div style="height: 20px;width: 50%;margin-left: 150px">
            <div class="youce">
              <div style="margin: 0 auto;">
                <div style="height: 400px;width: 100%;" v-for="xq in s">
                  <ul style="height: 400px">
                    <li style="font-size: 25px">{{xq.name}}</li>
                    <li style="font-size: 20px"><span style="color: pink">[{{xq.hostsalr}}]</span> </li>
                    <li>售价 <span style="font-size: 20px;color: pink">￥{{xq.price}}</span></li>
                    <li>销量 已售<span style="color: pink"> {{xq.saleCount}} </span>件</li>
                    <li>描述 {{xq.descriptiom}}</li>
                    <li>库存 {{xq.stock}}</li>
                    <li>介绍 {{xq.introduce}}</li>
                  </ul>
                  <hr>
                </div>
                <div style="height: 400px;width:100%;">
              <span>
                <span style="position: relative;top: 10px">规格</span>
                <div style="margin: 0 auto;display: inline-block;margin-top: 5px"  >
                 <el-button
                     v-for="(color, index) in colors"
                     :key="index"
                     :class="['c', { pink: selected === index }]"
                     @click="selectColor(index)"
                 >
                  {{ color }}
                   </el-button>

                </div>
              </span>
                  <hr>
                  <span style="position: relative;top: 30px">附赠 下单填写留言，即免费赠送精美贺卡！</span><br>
                  <span style="position: relative;top: 50px">配送范围 全国（可配送至全国1000多个城市，市区内免配送费)</span>
<!--                  <el-form style="position: relative;top: 70px">-->
<!--                    <el-form-item label="配送至">-->
<!--                      <el-select  placeholder="请选择你的城市" style="width: 60%">-->
<!--                        <el-option label="成都" value="cd"></el-option>-->
<!--                        <el-option label="兰州" value="lz"></el-option>-->
<!--                        <el-option label="太原" value="ty"></el-option>-->
<!--                      </el-select>-->
<!--                    </el-form-item>-->
<!--                  </el-form>-->
                  <el-button class="button" style="background-color: white;color: pink" @click="details">加入购物车</el-button>
                  <el-button class="button" @click="() => { buy(id, colors); zf(); }">立即购买</el-button>
                  <div style=" position: relative; top: 50px;left: 450px">
                    <a href="/" class="sc"> <el-icon style="font-size: 30px;margin-left: 30px"><Star /></el-icon>
                      <span style="position: relative;top: 20px;right: 45px">收藏商品</span></a>
                    <el-icon style="font-size: 30px;margin-left: -10px"><PieChart /></el-icon>
                    <span style="position: relative;top: 20px;right: 30px">分享</span>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!--          下半部分-->
          <div style="height: 800px;width: 50%;margin-left: 100px">
            <!--          左边-->
            <div class="hot-sale-container">
              <div class="images-container">
                <span style="color: red">热销推荐</span>
                <div style="text-align: center;width: 100%;height: 260px;margin-top: 10px" v-for="e in d" @click="xq">
                  <img :src="e.img_url" alt="热销商品图片" style="width:100% ; height: auto;">
                  <span>{{e.name}}</span><br>
                  <span class="size">￥{{e.price}}</span>
                </div>

                <div>
                  <a href="product"><el-button style="margin: 0 50px">查看更多</el-button></a>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 50%;margin-left: 600px;margin-top: -800px" >
            <!--            右边-->
            <div class="vvv">
              <div style="width: 150%;height: 50px;margin-right: 600px;background-color: rgba(64,64,64,0.1)">
                <span style="line-height: 50px;color: pink">商品详情</span>
                <el-button style="position: relative;left: 850px;background-color: pink" @click="ewmtp()">微信扫码下单</el-button>
                <img src="1234.png" style="width: 120px;height: 120px;position: relative;left: 915px" v-if="ewm">
              </div>



              <div style="margin-left: 150px;margin-top: 20px;width: 100%" >
                <img :src="c.img_url1" v-for="c in s">
                <img :src="c.img_url2" v-for="c in s" style="margin-top: 10px">
                <img :src="c.img_url3" v-for="c in s" style="margin-top: 5px">
              </div>
            </div>
          </div>
        </el-main>

      </el-container>
    </div>

  </div>
</template>

<script setup>

import {ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";

// 定义规格列表
const colors = ['金色', '白色', '黑色', '天空蓝', '玫瑰粉']

// 定义一个响应式变量来跟踪被选中的按钮索引
const selected = ref(null)

// 选择颜色的方法
function selectColor(index) {
  selected.value = index // 更新选中的按钮索引
}


const ewm=ref(false)
const ewmtp=()=>{
  ewm.value = !ewm.value;
}
const xq=()=>{
  router.push('/search')
}

const s=ref([
  {name:'红玫瑰',hostsalr:'2099热卖52枝红玫瑰',price:'509',
    saleCount:'1.22万',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚',
    stock:'888',introduce:'红色风华纸3大张、 白色小号英文插画纸（You are my love）4张、白色雪梨纸1张、酒红色罗纹烫金丝带2米',
    img_url:'mgh.png',img_url1:'mgh.png',img_url2:'mgh.png',img_url3:'mgh.png',}
])
const d=ref([
  {img_url:'mgh.png',name:'北欧花艺素雅仿真花',price:'250'},
  {img_url:'mgh.png',name:'北欧花艺素雅仿真花',price:'250'},
  {img_url:'mgh.png',name:'北欧花艺素雅仿真花',price:'250'},
])

//加入购物车
  const details = (id,colors)=>{
    axios.post(BASE_URL+'/v1/cart/details/'+id+'/'+colors)
        .then((response)=>{
          if (response.data.code == 2000){
            ElMessage.success('成功加入购物车!')
          }else{
            ElMessage.error('商品已下架')
          }
        })
    }
    //立即购买  colors(规格)
  const buy = (id,colors)=>{
    axios.post(BASE_URL+'/v1/submitOrder/buy/'+id+'/'+colors)
        .then((response)=>{
          if (response.data.code == 2000){
          }else{
            ElMessage.error('商品已下架')
          }
        })
    }
const zf=()=>{
  router.push('/submitOrder')
}
//热销推荐
const hotproudc = (id)=>{
  axios.post(BASE_URL+'/v1/search/hotproudc/'+id)
      .then((response)=>{
        if (response.data.code == 2000){
        }else{
          ElMessage.error('商品已下架')
        }
      })
}
</script>


<style scoped>

li {
  height: 10%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.c{
  margin-left: 35px;
  margin-top: 20px;

}
.button{
  font-size: 18px;
  height: 50px;
  width: 200px;
  color: white;
  background-color: pink;
  border-radius: 4px;
  box-shadow: none;
  position: relative;
  top: 25%;
}
.hot-sale-container {
  flex-direction: column;
  align-items: flex-start;
  display: inline-block;
  width: 30%;
}
.images-container{
  width: 200px;
  margin-left: 40%;
  background-color: rgba(64,64,64,0.1);
}
.images-container img {
  display: block;
}
.size{
  font-size: 25px;
}
.vvv{
  float: right;
  margin-right: 200px;
}
.vvv img {
  width: 100%;
  height: auto;
  display: block;
}
a{
  color: black;
  text-decoration: none;
}
a:hover {
  color: pink;
}
.pingjia{
  position: relative;
  left: 30px;
}
.youce{
  width: 600px;
  float: right;
  margin-top: -800px;
  margin-right: -500px;
}
.sc{
  color: black;
}
.sc:hover{
  color: orange;
}
.pink {
  background-color: pink !important; /* 覆盖Element Plus的默认样式 */
  color: white; /* 如果需要的话，改变文本颜色 */
}
</style>